<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%
    /**
     * @Description : 로그인 화면
     * @Modification Information
     *
     *   수정일               수정자                   수정내용
     *  -------    --------    ---------------------------
     *
     *
     */
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>VOC System</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/start/jquery-ui-1.10.3.custom.css'/>" />
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/ui.jqgrid.css'/>" />
 
<style>
html,body { height:100%; }
body { margin:0; padding:0; }
#wrap { width:500px; height:100%;}

.table_row {
  padding:1px 0px 1px 0px;
  width:100%;
  clear:both;
}
.col {
  padding:1px 0px 1px 0px;
  float:left;
}
.col_last {
  padding:1px 0px 1px 0px;
  float:left;
}

/** jqury button */
.ui-button-text { position:relative; bottom:4px; }

/** general style */
body { font-family:'돋움', Dotum, AppleGothic, sans-serif; font-size:12px;}
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin:0; padding:0; }
button {height:20px;}
</style> 
 
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.9.0.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui-1.10.3.custom.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/validate/jquery.validate.min.js'/>"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    // validate usage 1. :: 아무메시지도 출력안하고 입력필드에 포커스싱만 한다. 
	/*$("#form").validate({
        rules: {
        	user_id: {required:true},
            password: {required:true},
        },
        messages: {
        },
        showErrors:function(errorMap, errorList){
        },
    });*/
    
    // validate usage 2. :: 메시지창을 보여준다.
    $("#form").validate({
        rules: {
            user_id: {required:true},
            password: {required:true},
        },
        messages: {
            user_id: "아이디은(는) 필수입력입니다.",
            password: "비밀번호은(는) 필수입력입니다.",
        },
        showErrors:function(errorMap, errorList){
            //$("#summary").html("Your form contains "
            //	      + this.numberOfInvalids()
            //	      + " errors, see details below.");
            this.defaultShowErrors();
            //alert(errorList[0].message);
        },
		invalidHandler: function(event, validator) {
			// 'this' refers to the form
			var errors = validator.numberOfInvalids();
			if (errors) {
			  var message = errors == 1
				? 'You missed 1 field. It has been highlighted'
				: 'You missed ' + errors + ' fields. They have been highlighted';
			  alert(validator.errorList[0].message);
			  //$("div.error span").html(message);
			  //$("div.error").show();
			} else {
			  //$("div.error").hide();
			}
		}		
    });    
});

$(function() {
    //$( "#radio" ).buttonset();
    $( "#btn_changeLocale" ).button()
        .click(function() {	
        event.preventDefault();
        $("#form").submit();
   	});
    $( "#btn_login" ).button();   
});
</script>
</head> 
<body>
${params.rdoLocale}
    <div id="wrap">
        <form id="form" name="form" action="<c:url value="/main/mainframe"/>" method="post">     
	        <h3 style="text-align:center;"><strong>고객의 소리</strong></h3>
	        <div class="table_row"> 
	            <div class="col"  style="width:100%;text-align:right;">
	                <div id="radio">
                        <p>
		                    <input type="radio" id="rdoKo" name="rdoLocale" value="ko" 
			                    <c:if test="${params.rdoLocale=='ko' || empty params.rdoLocale}">checked</c:if>/>
			                    <label for="rdoKo"><spring:message code="locale_ko"/></label>
		                    <input type="radio" id="rdoEn" name="rdoLocale" value="en" 
			                    <c:if test="${params.rdoLocale=='en'}">checked</c:if>/>
			                    <label for="rdoEn"><spring:message code="locale_en"/></label>
		                </p>        
	                </div>
	            </div>
	        </div>	
	        <div class="table_row"> 
                <div class="col" style="width:50%;text-align:right;">
                    ID: 
                </div>
	            <div class="col_last" style="width:50%;text-align:right;">
                    <input type="text" id="user_id" name="user_id" />
	            </div>
	        </div>	
	        <div class="table_row"> 
                <div class="col" style="width:50%;text-align:right;">
                    Password: 
                </div>
	            <div class="col_last"  style="width:50%;text-align:right;">
                    <input type="password" id="password" name="password"/>
	            </div>
	        </div>	
	        <div class="table_row"> 
	            <div class="col_last" style="width:100%;text-align:right;">
		                <button id="btn_changeLocale"><spring:message code="change_locale"/></button>
		                <button id="btn_login"><spring:message code="login"/></button>
	            </div>
	        </div>	
        </form>
	</div>	
</body>
</html>
